<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <#include "/view/admin/head.html"/>
    <style>
        body{
            width:100%;height:100%;
        }

    </style>
    <style type="text/css">  /*顶部样式*/
        .badge-red {
            background-color:red;color:white;font-size: 12px;position: absolute;top:0px;left: 0px;
        }
        .badge-default {
            background-color:#9e9e9e;color:white;font-size: 12px;position: absolute;top:0px;left: 0px;
        }
        .topleft-defaultbadge{
            color:white;font-size: 12px;position: absolute;top:0px;left: 0px;
        }

        .container-fluid{
            background-color: #438eb9;
            color:white;
            height: 53px;
        }
        .navbar-brand{
            color:white;
        }
        .white{
            color:white!important;
        }
        .top-title .active a{
            color: black!important;
        }
        .top-title a{
            color: lightcyan!important;
        }
        h3{
            margin-top:15px;
            margin-bottom:15px;
            margin-right:20px;
        }
    .navbar {
        position: relative;
        min-height: 50px;
        margin-bottom: 0px;
        border: 1px solid transparent;
    }



    </style>
    <style>/*顶部下的左右两边的容器*/
    #wrap {   }
        .left{width:250px;float:left;}.right{margin-left:260px;}
    .left i{
        margin-right:10px;
    }
    </style>
    <style> /*左边菜单栏样式*/
    .firstmenu{
        height: 0px;
        display: block;
    }
    .firstli > a{

        background-color:#dfeaf3 ;
        border: solid 1px #a1afbb;
        padding-left:15px;
        font-size:16px;
        font-weight: bold;
    }
    .secondmenu a {
        background-color: #f8f8f8;
        color: #585858;
        border: dotted 1px #c5d8e9;
        border-top-width: 0px;
        border-left-width: 0px;
        padding-left:50px!important;
        padding-top: 10px!important;
    }
    .secondmenu > li.active > a{
        background-color: #E0E0E0;
    }

    .secondmenu > li.active > a:after{

        display: block;
        content: "";
        position: absolute;
        right: 0;
        top: 8px;
        border: 8px solid transparent;
        border-top-color: transparent;
        border-top-style: solid;
        border-top-width: 14px;
        border-right-color: #0c91e5;
        border-right-style: solid;
        border-right-width: 10px;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 14px;
        border-left-color: transparent;
        border-left-style: solid;
        border-left-width: 10px;
        border-width: 14px 10px;
    }

    .nav-header.collapsed > span.glyphicon-chevron-toggle:before {
            content: "\e114";
        }

        .nav-header > span.glyphicon-chevron-toggle:before {
            content: "\e113";
        }


    .left li.active {
        background-color: #fafafa;

    }
        .left li:hover{
            background-color: white;
            color: black;

        }
    </style>
    <style>/*右边tap页签样式*/
    div.top-tabs{
        height:28px;
        background-color: white;
        border-bottom-style: solid;
        border-bottom-color: blue;
        border-bottom-width: 2px;
    }
    div.top-tabs ul li
    {
        float:left; /* 向左漂移，将竖排变为横排 */
    }
    div.top-tabs ul
    {
        list-style:none; /* 去掉ul前面的符号 */
        margin: 0px; /* 与外界元素的距离为0 */
        padding: 0px; /* 与内部元素的距离为0 */
        width: auto; /* 宽度根据元素内容调整 */
        /*margin-right:10px;*/
    }
    div.top-tabs ul li a
    {
        margin-left:5px;
        background-image: url(${base}/jstool/image/tab2.gif);
        background-repeat: repeat-x;
        /*background-color: #c5d8e9;*/
        /*border: 1px #9e9e9e solid; !* 边框 *!*/
        color: #2e383c; /* 文字颜色 */
        display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */
        line-height: 1.35em; /* 行高 */
        padding: 4px 20px; /* 内部填充的距离 */
        text-decoration: none; /* 不显示超链接下划线 */
        white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */

    }
    div.top-tabs ul li a:hover{
        background-position:0px -42px;
    }

    div.top-tabs ul li{
        position:relative;
    }
    div.top-tabs ul li.active a{
        background-position:0px -84px;
        color:white;
    }
    div.top-tabs ul li a.close{
        z-index: 99;
            opacity: 1;
            padding: 0px!important;margin:0px;border:0px!important;
            background-image: url(${base}/jstool/image/close.gif); background-repeat: no-repeat;height: 14px;width: 14px;
            background-position:0px 0px;
            /*background-position:0px -14px;*/

        }

    /*a.close:hover{*/
        /*background-image: url(${base}/jstool/image/close.gif); background-repeat: no-repeat;height: 14px;width: 14px;*/
        /*background-position:0px -14px;*/
    /*}*/
        .lrd{
            position:absolute;float:right;top:0px;right:0px;margin:1px 1px 0px 0px;border:0px;
        }


    </style>
    <style>/*右边 页设置*/
        .tabs-page{
            width:100%;
        }
        #page{
            background-color: #dfeaf3
        }

    </style>

</head>
<body >
<div class="contain">
    <div id="top">
        <nav class="navbar navbar-default navbar-static-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <h3>社聚共享后台管理系统</h3>
                </div>
                <ul class="nav navbar-nav nav-pills top-title">
                    <li class="active" data-toggle="tab"><a href="#"><b>首页管理</b></a></li>
                    <li><a href="#"  data-toggle="tab"><b>订单管理</b></a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">搜索</button>
                    </form>
                    </li>

                    <li><a href="#">
                        <div>
                            <span class="badge badge-red white">6</span>
                            <span class="glyphicon glyphicon-tags white"></span>
                        </div></a>
                    </li>
                    <li><a href="#">
                        <div>
                            <span class="badge badge-red white">3</span>
                            <span class="glyphicon glyphicon-comment white"></span>
                        </div></a>
                    </li>
                    <li>
                        <a href="#">
                            <div>
                                <span class="badge badge-default white">0</span>
                                <span class="glyphicon glyphicon-bell white"></span>
                            </div></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle white" data-toggle="dropdown" style="padding:5px;width:168px;">
                            <img src="${base}/jstool/bk/login_bk2.jpg" width="40px" height="40px"/>      ${Session.adminuser.nickname!}
                            <span class="glyphicon glyphicon-chevron-down" style="float:right;margin-right:10px; margin-top:10px; "></span>
                        </a>

                        <ul class="dropdown-menu">
                            <li><a href="javascript: pagetip('upinfo','修改用户信息','${base}/xyuser/add.do?userId=${Session.adminuser.userId!}');">修改用户信息</a></li>
                            <li><a href="javascript: pagetip('password','修改密码','${base}/xyuser/upd.do?userId=${Session.adminuser.userId!}');">修改密码</a></li>
                            <li><a href="#">系统设置</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分离的链接</a></li>
                            <li class="divider"></li>
                            <li><a href="#">另一个分离的链接</a></li>
                        </ul>
                    </li>
                    <li ><a href="javascript:onconfirm('确定退出登录吗？','${base}/sys/logout.do')" class="white"><span class="glyphicon glyphicon-log-in"></span> 退出</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div id="wrap">
        <div class="left" >
            <!-- 左边菜单栏，分二级 -->
            <ul  class="nav nav-list firstmenu">

                <#list listmap as maplist>


                    <li class="firstli">
                        <a href="#${maplist.key!}" class="nav-header collapsed " data-toggle="collapse" >
                            <i class="glyphicon glyphicon-th-list"></i>${maplist.title!}<span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
                        </a>
                        <ul id="${maplist.key!}"  class="nav nav-list collapse secondmenu" style="height: 0px;">
                            <#list maplist.list as c>
                                <li id="${c.key!}"><input type="hidden" value="${base}${c.url}"><a href="#"><i class="glyphicon glyphicon-edit"></i>${c.title!}</a></li>
                            </#list>
                        </ul>
                    </li>
                </#list>
            </ul>

                <!-- 左边菜单栏，分二级 -->
              <!--  <li class="firstli">
                    <a href="#collapse1" class="nav-header collapsed " data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        系统管理
                        <span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
                    </a>
                    <ul id="collapse1"  class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li id="z1"><a href="#"><i class="glyphicon glyphicon-user"></i>&nbsp;用户管理</a></li>
                        <li id="z2"><a href="#"><i class="glyphicon glyphicon-th-list"></i>&nbsp;菜单管理</a></li>
                        <li id="z3"><a href="#"><i class="glyphicon glyphicon-asterisk"></i>&nbsp;角色管理</a></li>
                        <li id="z4"><a href="#"><i class="glyphicon glyphicon-edit"></i>&nbsp;修改密码</a></li>
                        <li id="z5"><a href="#"><i class="glyphicon glyphicon-eye-open"></i>&nbsp;日志查看</a></li>
                    </ul>
                </li>

                <li class="firstli">
                    <a href="#collapse2" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        系统管理2
                        <span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
                    </a>
                    <ul  id="collapse2"   class="nav nav-list collapse secondmenu">
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i>&nbsp;用户管理2</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-th-list"></i>&nbsp;菜单管理2</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>&nbsp;角色管理2</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-edit"></i>&nbsp;修改密码2</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>&nbsp;日志查看2</a></li>
                    </ul>
                </li>
            </ul>-->


        </div>
        <div class="right" style="background-color: #94ead9">
            <div class="top-tabs">
                <ul>
                    <li id="tab_page_home" class="active"><a>主页</a></li>
                    <!--<li id="tab_page_z1"><a>用户管理</a><div class="lrd"><a class="close"></a></div></li>-->
                    <!--<li id="tab_page_z2"><a>菜单管理</a><div class="lrd"><a class="close"></a></div></li>-->
                    <!--<li id="tab_page_z3"><a>角色管理</a><div class="lrd"><a class="close"></a></div></li>-->
                    <!--<li id="tab_page_z4"><a>修改密码</a><div class="lrd"><a class="close"></a></div></li>-->
                </ul>
            </div>

            <div class="tabs-page">
                <div id="page" style="width: 100%; height: 500px;">
                  <iframe id="page_home" style="overflow-x: hidden; display: inline;" allowtransparency="true" frameborder="0" width="100%" height="100%" src="${base}/sys/home.do"></iframe>
                    <!--<iframe id="page_z1" style="overflow-x: hidden; display: inline;" allowtransparency="true" frameborder="0" width="100%" height="100%"
                            src="http://139.199.208.52:8080/fhadmin/login_default.do"></iframe>-->
                   <!-- <iframe id="page_z2" style="overflow-x: hidden; display: none;" allowtransparency="true" frameborder="0" width="100%" height="100%"
                            src="http://139.199.208.52:8080/fhadmin/tool/goTwoDimensionCode.do"></iframe>-->
                 <!--   <iframe id="page_z3" style="overflow-x: hidden; display: none;" allowtransparency="true" frameborder="0" width="100%" height="100%"
                            src="http://139.199.208.52:8080/fhadmin/fhbutton/list.do"></iframe>-->
                </div>
            </div>

        </div>
    </div>



</div>

<script type="text/javascript">
    function onconfirm(content,url){
        if (window.confirm(content)){
            location.href=url;
        }
//        if (window.confirm("确认删除吗?")) {
//            location.href=url;
//        }
    }


    //设置样式
    $(function() {
      $('#page').css("height",($(window).height()-53-28-8)+"px");
        bindelement();

    });
    //左边菜单栏
    $('.firstmenu .secondmenu li').click(function(){
        var id = $(this).attr("id");
        if(''==id||id==null){
            return;
        }
        $('.firstmenu .secondmenu li').removeClass("active");
        $(this).addClass("active");

        $('div.top-tabs ul li#tab_page_'+id).click(function(){
            $('div.top-tabs ul li').removeClass("active");
            $(this).addClass("active");
        });

        var aText = $($(this).find("a")[0]).text();
        var url = $($(this).find("input")[0]).attr("value");
        pagetip(id,aText,url);
    });
    function pagetip(id,aText,url){
        var bt = true;//判断是否存在页签
        if($('.top-tabs ul').find('#tab_page_'+id).length==0){
            $('.top-tabs ul').append("<li id=\"tab_page_"+id+"\"><a>"+aText+"</a><div class=\"lrd\"><a class=\"close\"></a></div></li>");
            bt=false;
        }

        if($('#page').find('#page_'+id).length==0){
            $('#page').append("<iframe id=\"page_"+id+"\" style=\"overflow-x: hidden; display: none;\" allowtransparency=\"true\" frameborder=\"0\" width=\"100%\" height=\"100%\" src=\""+url+"\"></iframe>");
        }
        if(bt){
            $($('.top-tabs ul').find('#tab_page_'+id+" > a")[0]).click();
            return;
        }

        //关闭按钮
        $('.top-tabs ul li#tab_page_'+id+' > .lrd a.close').click(function(ex){
            window.event? window.event.cancelBubble = true : e.stopPropagation();
            var pageId = $(this).parent().parent().attr('id').substring(4);
            $(this).parent().parent().remove();
            $('#'+pageId).remove();
            if($('.top-tabs ul li.active').length==0){
                $('#tab_page_home > a').click();
            }

        });
        //页签切换
        $('.top-tabs ul li#tab_page_'+id+' > a').click(function(){
            $('#page').css("height",($(window).height()-53-28-8)+"px");
            var id = $(this).parent().attr('id');
            if(id==''||id==null){
                $('#page iframe').css("display","none");
                return ;
            }
            var pageId = $(this).parent().attr('id').substring(4);
            if($('#page').find('#'+pageId).length==0){
                $('#page iframe').css("display","none");
                return;
            }
            $('#'+pageId).css("display","inline");
            $('#'+pageId).siblings().css("display","none");
        });

        $('div.top-tabs ul li#tab_page_'+id).click(function(){
            $('div.top-tabs ul li').removeClass("active");
            $(this).addClass("active");
        });
        $('.top-tabs ul li#tab_page_'+id+' > a').click();
    }
    function bindelement(){

        //右边页签

        $('div.top-tabs ul li').click(function(){
            $('div.top-tabs ul li').removeClass("active");
            $(this).addClass("active");
        });

        $('.top-tabs ul li > a').click(function(){
            $('#page').css("height",($(window).height()-53-28-8)+"px");
            var id = $(this).parent().attr('id');
            if(id==''||id==null){
                $('#page iframe').css("display","none");
                return ;
            }
            var pageId = $(this).parent().attr('id').substring(4);
            if($('#page').find('#'+pageId).length==0){
                $('#page iframe').css("display","none");
                return;
            }
            $('#'+pageId).css("display","inline");
            $('#'+pageId).siblings().css("display","none");
        });
        //关闭按钮
        $('.top-tabs ul li > .lrd a.close').click(function(ex){
            window.event? window.event.cancelBubble = true : e.stopPropagation();
            var pageId = $(this).parent().parent().attr('id').substring(4);
            $(this).parent().parent().remove();
            $('#'+pageId).remove();
            if($('.top-tabs ul li.active').length==0){
                $('#tab_page_home > a').click();
            }
        });
    }
</script>
</body>
</html>